{{ define "layout" }}

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <title>Repsheet::Visualizer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="">
    <meta name="author" content="Aaron Bedra" />

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,800italic,400,600,800" type="text/css">

    <link rel="stylesheet" href="/public/stylesheets/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="/public/stylesheets/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/public/js/libs/css/ui-lightness/jquery-ui-1.9.2.custom.css" type="text/css" />

    <link rel="stylesheet" href="/public/js/plugins/icheck/skins/minimal/blue.css" type="text/css" />
    <link rel="stylesheet" href="/public/js/plugins/select2/select2.css" type="text/css" />
    <link rel="stylesheet" href="/public/js/plugins/fullcalendar/fullcalendar.css" type="text/css" />

    <link rel="stylesheet" href="/public/stylesheets/App.css" type="text/css" />
    <link rel="stylesheet" href="/public/stylesheets/custom.css" type="text/css" />
    <style>
      #header {
      padding-top: 20px;
      padding-left: 10px;
      }

      h3.logo-head {
      color: white;
      }
    </style>
    <script src="https://maps.google.com/maps/api/js?key={{ .Configuration.GoogleMapsApiKey }}" type="text/javascript"></script>
  </head>
  <body>

    <div id="wrapper">
      <header id="header">
        <a href="/" style="text-decoration:none;">
          <h3 class="logo-head">Repsheet Visualizer</h3>
        </a>
      </header>

      <nav id="top-bar" class="collapse top-bar-collapse">
        <ul class="nav navbar-nav pull-left">
          <li class="">
            <a href="/">
              <i class="fa fa-home"></i>
              Home
            </a>
          </li>
        </ul>
      </nav>


      <div id="sidebar-wrapper" class="collapse sidebar-collapse">
        <div id="search">
          <form method="post" action="/search">
            <input name="actor" id="actor" class="form-control input-sm" type="text" placeholder="Search for an Actor" />
            <button type="submit" id="search-btn" class="btn"><i class="fa fa-search"></i></button>
          </form>
        </div>

        <nav id="sidebar">
          <ul id="main-nav" class="open-active">
            <li {{if eq .Active "dashboard"}} class="active" {{end}}>
              <a href="/">
                <i class="fa fa-dashboard"></i>
                Dashboard
              </a>
            </li>

            <li {{if eq .Active "blacklist"}} class="active" {{end}}>
              <a href="/blacklist">
                <i class="fa fa-ban"></i>
                Blacklist
              </a>
            </li>

            <li {{if eq .Active "marklist"}} class="active" {{end}}>
              <a href="/marklist">
                <i class="fa fa-gavel"></i>
                Marklist
              </a>
            </li>

            <li {{if eq .Active "whitelist"}} class="active" {{end}}>
              <a href="/whitelist">
                <i class="fa fa-thumbs-o-up"></i>
                Whitelist
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <div id="content">
	{{ template "content" .}}
      </div>
    </div>

    <footer id="footer">
      <ul class="nav pull-right">
        <li>
          Copyright &copy; Aaron Bedra.
        </li>
      </ul>
    </footer>

    <script src="/public/js/libs/jquery-1.9.1.min.js"></script>
    <script src="/public/js/libs/bootstrap.min.js"></script>
    <script src="/public/js/App.js"></script>
  </body>
</html>

{{ end }}
